<template>
  <div class="wh-start-wrapper" ref="triggerDom">
    <div
      class="wh-start"
      :class="{ active: isStart, out: !isStart }"
      @mousemove="handleMouseMove"
      @mouseleave="handleMouseLeave"
    >
      <h3 class="fs48">开启语言智能高效赋能时代</h3>
      <p class="fs36 pt46 pb60">
        累计开启用户
        <effect-count :count="78223344" is-format :playing="isStart" />
        人+
      </p>
      <div class="btn mt17">立即使用</div>
      <img src="../../assets/images/home/start01.svg" alt="start" :style="leftStyle" />
      <img src="../../assets/images/home/start4.svg" alt="start" :style="rightStyle" />
    </div>
    <div class="wh-start-bg">
      <img src="../../assets/images/home/start-bg.png" alt="bg" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import EffectCount from '@/base/effectCount.vue'
import { useScroll } from '@/hooks'

const leftRotateY = ref<number>(45)
const rightRotateY = ref<number>(-60)
const leftRotateZ = ref<number>(0)
const rightRotateZ = ref<number>(6)

const { triggerDom, isStart } = useScroll()

const leftStyle = computed(() => {
  return {
    transform: `rotateX(0) rotateY(${leftRotateY.value}deg) rotateZ(${leftRotateZ.value}deg)`
  }
})

const rightStyle = computed(() => {
  return {
    transform: `rotateX(0) rotateY(${rightRotateY.value}deg) rotateZ(${rightRotateZ.value}deg)`
  }
})

const handleMouseMove = (ev: MouseEvent) => {
  const { x, y, width, height } = (ev.currentTarget as HTMLElement).getBoundingClientRect()
  leftRotateY.value = 90 - (ev.x - x) / (width / 45)
  leftRotateZ.value = (ev.y - y) / (height / 6)
  rightRotateY.value = -(ev.x - x) / (width / 30) - 60
  rightRotateZ.value = 6 - (ev.y - y) / (height / 12)
}

const handleMouseLeave = () => {
  leftRotateY.value = 45
  leftRotateZ.value = 0
  rightRotateY.value = -60
  rightRotateZ.value = 0
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

@keyframes btn-radar {
  from {
    width: 214px;
    height: 80px;
  }
  to {
    width: 274px;
    height: 140px;
    opacity: 0;
  }
}

::v-deep(.effect-count) {
  display: inline-block;

  > span {
    font-size: 36px;
  }
}

.wh-start-wrapper {
  position: relative;
  width: 100%;
  height: 885px;

  .wh-start {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 250px;
    box-sizing: border-box;
    transform-style: preserve-3d;
    perspective: 2000px;
    position: relative;
    z-index: 520;

    &.active {
      h3,
      p,
      .btn {
        opacity: 1;
        transform: translateY(0);
      }

      h3 {
        transition: all 0.5s $cubic;
      }

      p {
        transition: all 0.5s 0.3s $cubic;
      }

      .btn {
        transition: all 0.5s 0.6s $cubic;
      }

      img {
        opacity: 1;
      }
    }

    &.out {
      h3,
      p,
      .btn {
        opacity: 0;
        transform: translateY(40px);
      }

      h3 {
        transition: all 0.5s 0.6s $cubic;
      }

      p {
        transition: all 0.5s 0.3s $cubic;
      }

      .btn {
        transition: all 0.5s $cubic;
      }

      img {
        opacity: 0;
      }
    }

    h3,
    p {
      position: relative;
      z-index: 10;
      opacity: 0;
      transform: translateY(40px);
    }

    .btn {
      opacity: 0;
      transition: all 0.5s 0.9s $cubic;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 214px;
      height: 80px;
      background: #1f86ff;
      box-shadow: 5px 20px 60px 5px rgba(77, 157, 251, 0.42);
      border-radius: 10px;
      font-size: 30px;
      font-weight: 400;
      color: #ffffff;
      position: relative;
      z-index: 10;

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 234px;
        height: 100px;
        background: rgba(31, 134, 255, 0.14);
        border-radius: 21px;
        animation: btn-radar 0.6s linear infinite;
      }
    }

    > img {
      opacity: 0;
      transition: opacity 0.3s;
      position: absolute;
      z-index: 10;

      &:nth-of-type(1) {
        transform-origin: left center;
        left: 60px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        height: 670px;
      }

      &:nth-of-type(2) {
        transform-origin: right center;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
      }
    }

    > .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;

      > img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }

  .wh-start-bg {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: painted;

    > img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}
</style>
